<template>
  <div class="about">
    <button @click="changeRunning" class="btn btn-default">点击切换</button>
    <div class="flex">
        <wave v-show="running" :width ='180'  unit="px" :controlRun = 'controlRun' :running.sync="running" :lockBtn.sync = 'lockBtn' backBg="#fff" backgroundDeep='rgba(86,156,255,1.00)' backgroundLight="rgba(176,212,255,1.00)"></wave>
    </div>
    
  </div>
</template>
<script>
import wave from '@/components/wave'
export default {
  components:{
    wave
  },
  data(){
    return{
      controlRun:false,
      running:false,
      lockBtn:true
    }
  },
  methods:{
   changeRunning(){
      if(this.lockBtn){
        this.controlRun = !this.controlRun
        this.lockBtn = false
      }
    },
  }
}
</script>
<style lang="scss">
.flex{
  margin-top:30px;
  display:flex;
  justify-content: center;
}
</style>
